// 获取英雄资料元素
const heroCategories = document.querySelectorAll('.hero-category');
const heroCategoryPanes = document.querySelectorAll('.hero-category-pane');

// 显示对应的英雄分类内容
function showHeroCategory(index) {
  heroCategories.forEach((category, i) => {
    if (i === index) {
      category.classList.add('active');
    } else {
      category.classList.remove('active');
    }
  });

  heroCategoryPanes.forEach((pane, i) => {
    if (i === index) {
      pane.classList.add('active');
    } else {
      pane.classList.remove('active');
    }
  });
}

// 监听英雄分类按钮点击事件
heroCategories.forEach((category, index) => {
  category.addEventListener('click', function () {
    showHeroCategory(index);
  });
});
